<template>
	<div
		style="width: 100%; height: 100%; background-color: #ffffff"
		v-loading="loading_chain"
		element-loading-text="正在加载..."
		element-loading-background="rgba(0, 0, 0, 0.4)"
	>
		<div class="chain">
			<div style="display: flex" v-for="i in chainData" :key="i.id">
				<div class="section-level blue" @click="changeChild(i)">
					<div class="sss">{{ i.chain_name }}({{ i.company_num }})</div>
				</div>
				<div class="section-level-upstream" v-for="i1 in i.children" :key="i1.id">
					<div class="title blue" @click="changeChild(i1)">{{ i1.chain_name }}({{ i1.company_num }})</div>
					<div class="level_one" v-for="i2 in i1.children" :key="i2.id">
						<div class="title" :class="i2.company_num == 0 ? 'grey' : 'blue'" @click="changeChild(i2)">
							{{ i2.chain_name }} ({{ i2.company_num }})
						</div>
						<div
							@click="changeChild(i3)"
							class="level_two ww100"
							:class="i3.company_num == 0 ? 'grey' : 'blue'"
							v-for="i3 in i2.children"
							:key="i3.id"
						>
							{{ i3.chain_name }} ({{ i3.company_num }})
						</div>
						<div class="cl"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, defineExpose, defineEmits } from 'vue';
import { getDetail } from '/@/api/chain/index';

const emit = defineEmits(['changeChild']);

let loading_chain = ref(false);
const chainData = ref();
const changeChain = (data) => {
	loading_chain.value = true;
	getDetail({ id: data.id, company_num_fag: 1 }).then((res) => {
		chainData.value = res.data;
		loading_chain.value = false;
	});
};

const changeChild = (val) => {
	emit('changeChild', val);
};

defineExpose({
	changeChain,
});
</script>

<style lang="scss" scoped>
.chain {
	width: 100%;
	height: 100%;
	padding: 10px;
	overflow: auto;
	.section-level {
		min-width: 6%;
		max-width: 6%;
		height: auto;
		font-size: 18px;
		float: left;
		color: #fff;
		display: flex;
		align-items: center;
		text-align: center;
		border-radius: 6px 0px 0px 6px;
		white-space: wrap;
		cursor: pointer;
		.sss {
			width: 100%;
			word-wrap: break-word; /* 旧版浏览器支持 */
			overflow-wrap: break-word;
		}
	}
	.title {
		color: #ffffff;
		padding: 10px;
		text-align: center;
		font-size: 16px;
		border-radius: 6px 6px 0px 0px;
		white-space: wrap;
		cursor: pointer;
	}
	.level_one {
		width: 49%;
		margin-top: 10px;
		margin-right: 1%;
		color: #fff;
		float: left;
		border: 0.0625rem dashed #0066cb;
		border-radius: 6px;
		cursor: pointer;
		.level_two {
			margin: 5px;
			margin-bottom: 0;
			float: left;
			text-align: center;
			padding: 10px;
			border-radius: 6px;
			&:nth-last-child(2) {
				margin-bottom: 5px;
			}
		}
		.level_two:nth-child(2n + 1) {
			float: right;
		}
		.ww100 {
			width: calc(100% - 10px) !important;
			white-space: wrap;
		}
		.w50 {
			width: 49%;
		}
	}
	.blue {
		background-color: #1890ff;
	}
	.orange {
		background-color: orangered;
	}
	.grey {
		background-color: gray;
	}
	.light-blue {
		background-color: rgb(99, 193, 224);
	}
	.section-level-upstream {
		border: 0.0625rem dashed #0066cb;
		border-right: none;
		width: 40%;
		float: left;
		padding: 5px;
		&:last-child {
			border-right: 0.0625rem dashed #0066cb;
		}
	}
	.section-level-midstream {
		width: 35%;
		float: left;
		padding: 5px;
		border: 0.0625rem dashed #0066cb;
	}
	.section-level-downstream {
		width: 20%;
		float: left;
		padding: 5px;
		border: 0.0625rem dashed #0066cb;
		border-radius: 0px 6px 0px 0px;
	}
}
</style>
